<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>虚拟的节点对象createDocumentFragment</title>
  <!-- 由于每一次对文档的插入都会引起重新渲染（计算元素的尺寸，显示背景，内容等），所以进行多次插入操作使得浏览器发生了很多次渲染，效率是比较低的。这是我们提倡通过减少页面的渲染来提高DOM操作的效率的原因。一个优化的方法是将要创建的元素写到一个字符串上，然后一次性写到innerHTML上，这种利用浏览器对innerHTML的解析确实是相比上面的多次插入快了很多。但是构造字符串灵活性上面比较差，很难符合创建各种各样的DOM元素的需求。利用 DocumentFragment ，可以弥补这两个方法的不足。 -->
  <!-- 后端一次给你10万条数据，前端如何优雅的展示 -->
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div></div>
</body>
<script>
  /*
  使用了requestAnimationFrame,但没有使用了虚弥节点
  const renderList = async () => {
    console.time('列表时间')
    const list = await getList()
    console.log(list)
    const total = list.length
    const page = 0
    const limit = 200
    const totalPage = Math.ceil(total / limit)

    const render = (page) => {
        if (page >= totalPage) return
        // 使用requestAnimationFrame代替setTimeout
        requestAnimationFrame(() => {
            for (let i = page * limit; i < page * limit + limit; i++) {
                const item = list[i]
                const div = document.createElement('div')
                div.className = 'sunshine'
                div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
                container.appendChild(div)
            }
            render(page + 1)
        })
    }
    render(page)
    console.timeEnd('列表时间')
}

  */
  "use strict"; {
    // const renderList = async () => {
    //   console.time('列表时间')
    //   const list = await getList()
    //   const total = list.length
    //   const page = 0
    //   const limit = 200
    //   const totalPage = Math.ceil(total / limit)

    //   const render = (page) => {
    //     if (page >= totalPage) return
    //     requestAnimationFrame(() => {
    //       // 创建一个文档碎片
    //       const fragment = document.createDocumentFragment()
    //       for (let i = page * limit; i < page * limit + limit; i++) {
    //         const item = list[i]
    //         const div = document.createElement('div')
    //         div.className = 'sunshine'
    //         div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
    //         // 先塞进文档碎片
    //         fragment.appendChild(div)
    //       }
    //       // 一次性appendChild
    //       container.appendChild(fragment)
    //       render(page + 1)
    //     })
    //   }
    //   render(page)
    //   console.timeEnd('列表时间')
    // };
  }
</script>

</html>